<template>
  <div style="width: 70%;margin: auto;">
    <el-skeleton :rows="5" animated v-if="user == []" />
    <el-table :data="user" style="margin: auto;">
      <el-table-column prop="name" label="玩家" :width="w * 0.15" />
      <el-table-column prop="score" label="天梯分" :width="w * 0.15" />
      <el-table-column prop="winn" label="胜场数" :width="w * 0.15" />
      <el-table-column prop="contestn" label="总场数" />
    </el-table>
    <div style="width: 35%;margin: 5vh auto 0px auto;text-align: center;">
      <el-pagination background layout="prev, pager, next,sizes" :total="length" style="margin:auto 5vh;"
        :hide-on-single-page="false" @current-change="handleChange" @size-change="handleSizeChange"
        :page-sizes="[10, 20, 50,]" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';

export default {
  name: 'rankView',
  components: {

  },
  setup() {
    let w = ref(window.innerWidth);
    let user = ref('');
    let nowPage = ref(1);
    let nowSize = ref(10);
    let length = ref(0);
    let getInfo = () => {
      $.ajax({
        type: "post",
        url: "http://124.221.73.180:3000/userInfo/allRank/",
        cache: false,
        async: false,
        data: {
          page: nowPage.value,
          size: nowSize.value,
        },
        success(resp) {
          user.value = resp.user;
          length.value = resp.length;
        }
      })
    }
    getInfo();
    let handleChange = (page) => {
      nowPage.value = page;
      getInfo();
    }
    let handleSizeChange = (size) => {
      nowSize.value = size;
      getInfo();
    }
    return {
      handleChange,
      handleSizeChange,

      w,
      length,
      user,
    }
  }
}
</script>

<style></style>